<template>
  <div class="block pager">
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    props: ['currentPage', 'total', 'pageSize'],
    methods: {
      handleSizeChange(val) {
        this.$emit('handleSizeChange', val)
      },
      handleCurrentChange(val) {
        this.$emit('handleCurrentChange', val)
      }
    }
  }
</script>

<style>
  .pager {
    margin-top: 10px;
  }
</style>